<template>
    <div class="home">
        <div class="header">
            <div class="type-wrap" @click="changeType">
                <span class="title">{{ currentType.name || '全部类型' }}</span>
                <van-icon name="qr" size="20" />
            </div>
            <div class="data-wrap">
                <span class="time" @click="changeTime">{{ Time[0] }}年 {{ Time[1] }} 月
                    <van-icon class="arrow" name="play" />
                </span>
                <span class="expense">总支出￥{{ dataCard.totalExpense }}</span>
                <span class="income">总收入￥{{ dataCard.totalIncome }}</span>
            </div>
        </div>
        <div class="content">
            <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
                <van-list v-model:loading="loadingMore" :finished="finished" finished-text="没有更多了" @load="onload">
                    <CardItem :list="dataCard.list" />
                </van-list>
            </van-pull-refresh>
        </div>
        <div class="save" @click="Recording">
            <van-icon name="records-o" size="20" />
            <span>记一笔</span>
        </div>
    </div>
    <PopType @handleType="selectType" ref="popTypeRef"></PopType>
    <PopTime @selectDate="chooseDate" ref="PopTimeRef"></PopTime>
    <PopAdd @queryAccount="onRefresh" ref="PopAddRef"></PopAdd>
</template>

<script setup>
import PopType from '@/components/PopType.vue';
import { ref, computed, reactive } from 'vue'
import PopTime from '@/components/PopTime.vue';
import formatteDate from '@/utils/date.js';
import CardItem from '@/components/CardItem.vue';
import axios from '@/api/index.js'
import { showToast } from 'vant';
import PopAdd from '@/components/PopAdd.vue';

// 选择类型
const popTypeRef = ref('')
// 类型弹出框
const currentType = ref({})
// 时间弹出框
const PopTimeRef = ref('')
// 选择时间
const Time = ref(formatteDate(new Date()).slice(0, 2))
// 控制下拉刷新展示
const refreshLoading = ref(false);
// 上拉加载更多
const loadingMore = ref(false)
// 账单数据
const dataCard = reactive({
    list: [],
    totalExpense: 0,
    totalIncome: 0,
    totalPage: 0
})
// 控制列表数据是否加载完毕
const finished = ref(false)
const page = ref(1)
const PopAddRef = ref('')


const changeType = () => {
    popTypeRef.value.show = true
}

//typeNameRef = popTypeRef.value.typeName
// const typeNameRef = computed(() => {
//     return popTypeRef.value.typeName
// })

// 选择类型
const selectType = (type) => {
    //console.log(type);
    currentType.value = type
    page.value = 1
    dataCard.list = []
    onRefresh()
}

const changeTime = () => {
    PopTimeRef.value.show = true
}

// 选择日期
const chooseDate = (type) => {
    //console.log(type);
    Time.value = type
    //console.log(Time.value);
    page.value = 1
    dataCard.list = []
    onRefresh()
}

// 请求账单数据
const getBillList = async () => {
    // await 当xxx 执行完毕后await会修改async的状态
    const { data } = await axios.get(`/api/bill/list?date=${Time.value.join('-')}&type_id=${currentType.value.id || 'all'}&page=${page.value}&size=5`)
    //console.log(data.list);
    // 正确渲染页面
    // 实现下拉刷新
    // 实现上拉加载更多
    // 收入和支出在页面上的颜色不同
    dataCard.list = [...dataCard.list, ...data.list]
    dataCard.totalExpense = data.totalExpense
    dataCard.totalIncome = data.totalIncome
    dataCard.totalPage = data.totalPage
    console.log(dataCard);
    page.value++
}

// list 列表加载时
const onload = async () => {
    await getBillList()
    if (page.value > dataCard.totalPage) { // 已经拿完了所有数据
        finished.value = true
    }
    loadingMore.value = false
}

// 下拉刷新
const onRefresh = async () => {
    //console.log(123);
    // 请求当前页面的数据
    page.value = 1
    dataCard.list = []
    refreshLoading.value = true
    await getBillList()
    showToast('加载成功');
    refreshLoading.value = false
    finished.value = false
}

const Recording = () => {
    PopAddRef.value.show = true;
}

</script>

<style lang="less" scoped>
.home {

    .header {
        background-color: rgb(55, 167, 98);
        height: 80px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: self-start;
        font-size: 16px;
        color: #fff;

        .type-wrap {
            background-color: rgb(70, 177, 113);
            padding: 10px;
            border: 4px;
            display: flex;
            align-items: center;

            .title {
                padding-right: 10px;
                margin-right: 10px;
                border-right: 1px solid rgb(94, 196, 136);
            }
        }

        .data-wrap {
            margin-top: 10px;
            font-size: 14px;

            .time {
                margin-right: 10px;

                .arrow {
                    transform: rotate(90deg);
                }
            }

            .expense {
                margin-right: 10px;
            }
        }
    }

    .content {
        height: calc(100vh - 170px);
        overflow-y: scroll;
        padding: 0 10px;
        background-color: rgb(232, 232, 232);
    }

    .save {
        position: fixed;
        width: 80px;
        height: 40px;
        bottom: 80px;
        right: 20px;
        border-radius: 100px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        color: #37a762;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>